<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="/WEB-INF/tlds/c.tld" prefix="c"%>
<%@ taglib uri="/WEB-INF/tlds/fmt.tld" prefix="fmt"%>
<%@ taglib uri="/WEB-INF/tlds/tiles-jsp.tld" prefix="tiles"%>

<c:set var="appCtx" value="${pageContext.request.contextPath}" />
<fmt:setBundle basename="messages"/>

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title><tiles:getAsString name="pageTitle" /></title>
		<tiles:insertAttribute name="common-resources" />

		<script type="text/javascript">
			$(function() {
				
				/* Contiene el nombre del botón de Aceptar de la ventana de solicitud de reinicio de clave */
				var winPasswordResetOkButtonName = "<fmt:message key='button.ok' />";
				
				/**
				 * Define el botón de ingreso al sistema.
				 */
				$('#btnSubmit').button();
				
				/**
				 * Define el botón de solicitud de reinicio de clave.
				 */
				$('#btnPasswordReset').button();

				/**
				 * Define la ventana de reinicio de clave.
				 */
				$('#winPasswordReset').dialog({
					autoOpen: false,
					width: 600,
					modal: true,
					show: "fade",
			        hide: "fade",
			        resizable: false,
					buttons: {
						"<fmt:message key='button.ok' />": function() { 
							
							submitPasswordResetRequest();
							
							return false;
						}, 
						
						"<fmt:message key='button.cancel' />": function() { 
							$(this).dialog("close");
							
							return false;
						}
					},
				});

				/**
				 * Define la ventana de reinicio de clave en proceso.
				 */
				$('#winPasswordResetInProcess').dialog({
					autoOpen: false,
					width: 400,
					height: 100,
					modal: true,
					show: "fade",
			        hide: "fade",
			        resizable: false,
			        closeOnEscape: false
				});

				/**
				 * Oculta la X para cerrar la ventana de reinicio de clave en proceso.
				 */
				$('#winPasswordResetInProcess').closest('.ui-dialog').find('.ui-dialog-titlebar-close').hide();
				 
				/**
				 * Relaciona el formulario de reinicio de clave a la ventana correspondiente.
				 */
				$('#winPasswordReset').parent().appendTo($("#passwordResetForm"));
				
				/**
				 * Envía los datos de login.
				 */
				$('#btnSubmit').click(function(){
					$("#msgWaitLogin").css("display","inline");
					$("#divButtons").css("display","none");
				});
				
				/**
				 * Abre la ventana de reinicio de clave.
				 */
				$('#btnPasswordReset').click(function(){
					$('#winPasswordReset').dialog('open');
					
					return false;
				});
				
				/**
				 * Asocia la pulsación de [Enter] a un campo de texto del reinicio de clave.
				 */
				$('#txtPasswordResetUsername').bind('keypress', function (event) {
					
					if (event.which == 13) {
						submitPasswordResetRequest();
					}
				});
				
				/**
				 * Asocia la pulsación de [Enter] a un campo de texto del reinicio de clave.
				 */
				$('#txtPasswordResetEmailAddress').bind('keypress', function (event) {
					
					if (event.which == 13) {
						submitPasswordResetRequest();
					}
				});
				
				/**
				 * Realiza el envío de una solicitud de reinicio de clave.
				 */
				function submitPasswordResetRequest() {
					
					document.getElementById('passwordResetForm').submit();
					
					$('#winPasswordReset').dialog('close');
					$('#winPasswordResetInProcess').dialog('open');
				}
				
				$('#j_username').focus();
			});
		</script>
	</head>
	<body>
		<div id="layoutContainer">
			<table id="layout">
				<tr>
					<td colspan="2" id="header">
						<tiles:insertAttribute name="header" />
					</td>
				</tr>
				<tr>
					<td id="strut" colspan="2"></td>
				</tr>
				
				<c:if test="${not empty param.password_reset_error || not empty param.login_error || not empty password_reset_error_key
								|| not empty param.logged_out || not empty successful_password_reset_key}">
					<tr>
						<td align="center">
							<table width="50%">
								<tr>
									<td>
										<div class="ui-widget">
										
											<c:if test="${not empty param.login_error || not empty param.password_reset_error 
															|| not empty password_reset_error_key}">
												<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
													<p>
														<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> 
														
													    <span id="infomessage" class="errormessage" >
													    	<c:if test="${not empty param.password_reset_error}">
														    	<fmt:message key="message.loginError" />: <c:out value="${param.password_reset_error}"/>.
													    	</c:if>
													    	
													    	<c:if test="${not empty param.login_error}">
														    	<fmt:message key="message.loginError" />: <c:out value="${SPRING_SECURITY_LAST_EXCEPTION.message}"/>.
													    	</c:if>
													    	
													    	<c:if test="${not empty password_reset_error_key}">
														    	<fmt:message key="${password_reset_error_key}" />.
														    	
														    	<c:if test="${not empty additional_error_details}">
														    		<fmt:message key="${message.additionalErrorDetails}" />: <c:out value="${additional_error_details}" />.
														    	</c:if>
													    	</c:if>
													    </span>
													</p>
												</div>
											</c:if>
										
											<c:if test="${not empty param.logged_out || not empty successful_password_reset_key}">
												<div class="ui-state-highlight ui-corner-all" style="padding: 0 .7em;"> 
													<p>
														<span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span> 
														
													    <span id="infomessage" class="errormessage" >
													    	<c:if test="${not empty param.logged_out}">
													    		<fmt:message key="message.successfulLogout" />.
													    	</c:if>
													    	
													    	<c:if test="${not empty successful_password_reset_key}">
													    		<fmt:message key="${successful_password_reset_key}" />.
													    	</c:if>
													    </span>
													</p>
												</div>
											</c:if>
																					
										</div>
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</c:if>
				
				<tr id="middle">
					<td id="content" colspan="2">
						<br />
						<br />
						
						<form id="loginForm" action="${pageContext.request.contextPath}/j_spring_security_check" method="post" style="text-align: center;">
							<fieldset class="fieldsetJsejtman">
								<table style="margin-left: auto; margin-right: auto;">
									<tr>
										<td><label for="j_username"><fmt:message key="label.username" />:</label></td>
										<td><input style="width: 50%" type="text" name="j_username"	id="j_username" /></td>
									</tr>
									<tr>
										<td><label for="j_password"><fmt:message key="label.password" />:</label></td>
										<td><input style="width: 50%" type="password" name="j_password"	id="j_password" /></td>
									</tr>
									<tr>
										<td colspan="2" align="center">
											&nbsp;
										</td>
									</tr>
									<tr>
										<td colspan="2" align="center">
											<div id="divButtons">
												<button id="btnSubmit" class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
													<span class="ui-button-text"><fmt:message key="button.ok" /></span>
												</button>
												&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
												<button id="btnPasswordReset" class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
													<span class="ui-button-text"><fmt:message key="button.passwordReset" /></span>
												</button>
											</div>
										</td>
									</tr>
								</table>
							</fieldset>
						</form>
						
						<table style="margin-left: auto; margin-right: auto;">
							<tr>
								<td>
									<span id="msgWaitLogin" class="waitMessage">
										<fmt:message key="message.pleaseWaitWhileProcessing" />.
									</span>
								</td>
							</tr>
						</table>
			
						<form id="passwordResetForm" action="${pageContext.request.contextPath}/passwordResetRequest" method="post">
							<fieldset class="transparent">
								<div id="winPasswordReset" title="<fmt:message key='label.passwordReset' />">
									<p><fmt:message key='message.enterPasswordResetInformation' />:<br /></p>
											
									<table style="margin-left: auto; margin-right: auto;">
										<tr>
											<td class="cellTableDialog"><label for="txtPasswordResetUsername"><fmt:message key="label.username" />:</label></td>
											<td class="cellTableDialog"><input size="20" type="text" name="passwordResetUsername" id="txtPasswordResetUsername" /></td>
										</tr>
										<tr>
											<td class="cellTableDialog"><label for="txtPasswordResetEmailAddress"><fmt:message key="label.emailAddress" />:</label></td>
											<td class="cellTableDialog"><input size="40" type="text" name="passwordResetEmailAddress" id="txtPasswordResetEmailAddress" /></td>
										</tr>
									</table>
								</div>
							</fieldset>
			
							<div id="winPasswordResetInProcess" title="<fmt:message key='label.passwordReset' />">
								<table style="margin-left: auto; margin-right: auto;">
									<tr>
										<td class="cellTableDialog">
											<br />
											
											<span id="msgWaitPasswordReset" class="waitMessage" style="display: block">
												<fmt:message key="message.pleaseWaitWhileProcessing" />.
											</span>
										</td>
									</tr>
								</table>
							</div>
						</form>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<tiles:insertAttribute name="footer" />
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>
